<template>
  <!-- 系统目录 西成药品 -->
  <div class="MedicenCata">
    <!-- main -->
    <div class="main">

      <!-- right -->
      <div class="main-right">
        <!-- tit -->
        <div class="main-icon">
          <div class="main-icon-a">
            <i :class="iconComes"
               style="border-radius: 50%;font-size: 20px;padding: 6px;margin-left: 8px;;background-color: #5a5a5a;color: #fff;"></i>
            <span style="font-size: 12px;font-weight:bold;margin-left: 12px;color: #606266;">{{ CatalogueName }}</span>
          </div>
          <!-- btn1 -->
          <div class="main-icon-b">
            <span style="font-size: 12px;color: #606266;font-weight: bold;">状态：</span>
            <el-dropdown @command="handleCommand" trigger="click">
              <span class="el-dropdown-link">{{ DropDownedName }}<i class="el-icon-down"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">可用</el-dropdown-item>
                <el-dropdown-item command="b">禁用</el-dropdown-item>
                <el-dropdown-item command="c" divided>全部</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!-- 按钮栏 -->
          <div class="main-icon-c">
            <div style="display: inline-block; margin-left: 10px;">
              <span class="select-label">科室:</span>
              <el-select
                  v-model="department"
                  placeholder="科室查询"
                  clearable
                  size="mini"
                  @change="loadDepartments()"
                  class="custom-select">
                <el-option
                    v-for="item in findAttribute"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id">
                </el-option>
              </el-select>

              <div style="display: inline-block; margin-left: 20px;">
                <span class="select-label">医生:</span>
                <el-select
                    v-model="doctor"
                    placeholder="医生查询"
                    clearable
                    size="mini"
                    @change="loadDepartments()"
                    class="custom-select">
                  <el-option
                      v-for="item in staff"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <!-- 按钮栏 -->
          <div class="main-icon-c">
            <el-button v-for="(v,i) in headerBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="mini"
                       v-if="!v.auth || permissionsArr.includes(v.auth)"
                       @click="handClick(i)">{{ v.title }}
            </el-button>
          </div>
        </div>
        <!-- add data -->
        <!-- table -->
        <div class="table">
          <el-table :data="tableData" border @row-dblclick="handledbRow">
            <el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type"
                             :prop="col.prop" :label="col.name" :render-header="labelHead" align="center"
                             :min-width="getColumnWidth(col.label,col.prop,tableData)">
              <template #default="{ row }">
                {{ safeGetMappedValue(col, row) }}
              </template>
            </el-table-column>
            <!-- fixed -->

            <el-table-column fixed="left" label="行号" type="index"></el-table-column>
            <!-- edit -->
            <el-table-column fixed="right" label="操作" width='158'
                             v-if="permissionsArr.includes('system:drgstable:edit')">
              <template slot-scope="scope">
                <div class="editbox" style="text-align: center;">
                  <el-button type="primary" @click="handleClickEdit(scope.row)" size="mini">编辑</el-button>
                  <el-button :type="scope.row.state === 1 ? 'danger' : 'success'"
                             @click="handleStartOrDisabled(scope.row)" size="mini">
                    {{ scope.row.state === 1 ? '禁用' : '启用' }}
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[8, 16, 24]"
            :page-size="pageSize"
            :total="totalSize"
            layout="total, sizes, prev, pager, next, jumper"
            background>
        </el-pagination>
      </div>
    </div>


    <!-- 新增坐诊表单 -->
    <div class="feet">
      <div class="addmessagesBox">
        <el-dialog title="新增坐诊" :visible.sync="addDialogVisible" width="50%" :before-close="handleClose"
                   :close-on-click-modal="false">
          <div class="tabs">
            <div class="tabsMain">
              <div class="tabs-left">
                <el-form :model="addForm" label-width="100px" size="mini" :rules="formRules" ref="addFormRef"
                         class="compact-form">
                  <!-- 第一行：科室、医生、状态 -->
                  <el-row :gutter="20">
                    <template v-for="(v,i) in addcategory">
                      <el-col
                          v-if="['deptId', 'doctorId', 'state'].includes(v.modelValue)"
                          :key="i"
                          :span="v.spanRows">
                        <el-form-item
                            :prop="v.modelValue"
                            :rules="getFieldRules(v)"
                            :label="v.label">
                          <el-select
                              v-model="addForm[v.modelValue]"
                              filterable
                              placeholder="请选择"
                              @focus="addEvent(v,i)"
                              @change="addEventChangge"
                              :disabled="v.disabled && !addForm.deptId"
                              style="width: 100%">
                            <el-option
                                v-for="item in $data[v.op]"
                                :key="item.id"
                                :label="v.op === 'active' ? `${item.label}-${item.userCode}` : item.label"
                                :value="item.id">
  <span style="float: center; color: #8492a6; font-size: 12px">
    {{ v.op === 'active' ? `${item.label} (${item.userCode})` : item.label }}
  </span>
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </template>
                  </el-row>

                  <!-- 第二行：复选框 -->
                  <el-row :gutter="20" class="checkbox-row">
                    <template v-for="(v,i) in addcategory">
                      <el-col
                          v-if="v.type === 'checkbox'"
                          :key="'cb-'+i"
                          :span="v.spanRows">
                        <el-form-item
                            :prop="v.modelValue"
                            :rules="getFieldRules(v)"
                            :label="v.label">
                          <el-checkbox
                              v-model="addForm[v.modelValue]"
                              :true-label="1"
                              :false-label="0">
                          </el-checkbox>
                        </el-form-item>
                      </el-col>
                    </template>
                  </el-row>

                  <!-- 时间选择器部分（保持原样） -->
                  <el-form :model="addForm">
                    <template v-for="item in formConfig">
                      <el-form-item :label="item.label" :key="item.label">
                        <el-time-picker
                            :value="[addForm[item.startField], addForm[item.endField]]"
                            @input="val => handleTimeChange(val, item.startField, item.endField)"
                            is-range
                            range-separator="-"
                            format="HH:mm"
                            value-format="HH:mm"
                            size="mini"
                            :disabled="addForm.schedulingC === 0 && !['startTime', 'endTime'].includes(item.startField)"
                            :picker-options="{
                    selectableRange: [
                      getTimeRange(item.startField).selectableRange,
                      getTimeRange(item.endField).selectableRange
                    ]
                  }"
                        />
                      </el-form-item>
                    </template>
                  </el-form>

                  <!--                  &lt;!&ndash; 晚班时间（保持原样） &ndash;&gt;
                                    <el-form>
                                      <template>
                                        <el-form-item>
                                          <span style="margin-right: 8px">晚班时间:</span>
                                          <el-time-picker
                                              v-model="addForm.snightTime"
                                              format="HH:mm"
                                              value-format="HH:mm"
                                              :disabled="addForm.schedulingC === 0"
                                              placeholder="选择时间"
                                              size="small"
                                              @change="console.log(addForm.snightTime)"
                                              :style="{width: '180px'}"
                                              class="time-picker-center"/>
                                        </el-form-item>
                                      </template>
                                    </el-form>-->

                  <!-- 表格部分（保持原样） -->
                  <div class="table-header">
                    <span>挂号类别:</span>
                    <el-button-group class="transparent-btn-group">
                      <el-button type="" icon="el-icon-plus" size="mini" class="transparent-btn"
                                 @click="handleCategoryAdd" :disabled="tableData2.length >= 1"></el-button>
                      <el-button type="" icon="el-icon-edit" size="mini" class="transparent-btn"
                                 :disabled="!selectedRow" @click="handleCategoryEdit"></el-button>
                      <el-button type="" icon="el-icon-circle-close" size="mini" class="transparent-btn"
                                 :disabled="!selectedRow" @click="handlePriceDelete"></el-button>
                    </el-button-group>
                  </div>

                  <el-table :data="tableData2" border
                            @row-click="handleRowClick"
                            highlight-current-row
                            :style="{ width: windowWidth + 'px' }"
                            ref="myTable">
                    <template v-for="col in tableRows2">
                      <el-table-column
                          :key="col.prop"
                          :type="col.type"
                          :prop="col.prop"
                          :label="col.name"
                          :formatter="(row) => formatColumn(row, col.prop)"
                          align="center"
                      ></el-table-column>
                    </template>
                    <el-table-column fixed="left" label="行号" type="index" width="50"></el-table-column>
                  </el-table>
                </el-form>
              </div>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" type="primary" @click="addCategoryData">添加</el-button>
            <el-button size="mini" @click="handleClose">取消</el-button>
          </div>
        </el-dialog>


        <!--新增坐诊时的挂号类别新增-->
        <div class="tabs">
          <el-dialog
              title="挂号类别-新增"
              :close-on-click-modal="false"
              :visible.sync="addCategoryDialogVisible"
              width="35%"
              :before-close="handleAddCategoryClose">

            <el-form :model="addCategoryForm" size="mini" class="compact-form"
                     style="display: flex; flex-direction: column; align-items: center;">
              <el-form-item label="挂号类别:" prop="rgstTypeId"
                            style="width: 100%; display: flex; justify-content: center;">
                <el-select
                    filterable
                    :filter-method="handleSimpleSearch"
                    v-model="addCategoryForm.rgstTypeId"
                    placeholder="请选择"
                    style="width: 180px;" @focus="loadCategoryOptions">
                  <el-option
                      v-for="item in categoryOptions"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id"
                      :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>

              <!--              <el-form-item label="主要类别:" prop="mainType"
                                          style="width: 100%; display: flex; justify-content: center;">
                              <el-select v-model="addCategoryForm.mainType" placeholder="请选择" style="width: 180px;">
                                <el-option
                                    v-for="item in mainTypeOptions"
                                    :key="item.id"
                                    :label="item.label"
                                    :value="item.id"
                                    :disabled="item.disabled"
                                ></el-option>
                              </el-select>
                            </el-form-item>-->
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button size="mini" @click="handleAddCategoryClose">取 消</el-button>
    <el-button type="primary" size="mini" @click="handleAddPriceData">确 定</el-button>
  </span>
          </el-dialog>
        </div>

        <!--新增坐诊时的挂号类别修改-->
        <div class="tabs">
          <el-dialog
              :close-on-click-modal="false"
              title="挂号类别-修改"
              :visible.sync="editCategoryDialogVisible1"
              width="35%"
              :before-close="handleEditCategoryClose">

            <el-form :model="editCategoryForm" size="mini" class="compact-form"
                     style="display: flex; flex-direction: column; align-items: center;" :disabled="isLookData">
              <el-form-item label="挂号类别:" prop="code" style="width: 100%; display: flex; justify-content: center;">
                <el-select
                    filterable
                    :filter-method="handleSimpleSearch"
                    v-model="editCategoryForm.rgstTypeId"
                    placeholder="请选择"
                    style="width: 180px;" @focus="loadCategoryOptions">
                  <el-option
                      v-for="item in categoryOptions"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id"
                      :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>

              <!--              <el-form-item label="主要类别:" prop="num" style="width: 100%; display: flex; justify-content: center;">
                              <el-select v-model="editCategoryForm.mainType" placeholder="请选择" style="width: 180px;">
                                <el-option
                                    v-for="item in mainTypeOptions"
                                    :key="item.id"
                                    :label="item.label"
                                    :value="item.id"
                                    :disabled="item.disabled"
                                ></el-option>
                              </el-select>
                            </el-form-item>-->
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button size="mini" @click="handleEditCategoryClose">取 消</el-button>
    <el-button type="primary" size="mini" @click="handleEditCategoryData" :disabled="isLookData">确 定</el-button>
  </span>
          </el-dialog>
        </div>


      </div>

      <!-- messagesBox -->
      <div class="messagesBox">


      </div>
    </div>

    <!-- 修改坐诊表单 -->
    <!-- 修改坐诊表单 -->
    <div class="feet">
      <div class="editmessagesBox">
        <el-dialog :title="dynamicTitle" :visible.sync="editDialogVisible" width="50%" :before-close="handleClose"
                   :close-on-click-modal="false" class="compact-form">
          <div class="tabs">
            <div class="tabsMain">
              <div class="tabs-left">
                <el-form :model="editForm" label-width="100px" size="mini" :rules="formRules" ref="addFormRef"
                         :disabled="isLookData">
                  <!-- 第一行：科室、医生、状态 -->
                  <el-row :gutter="20">
                    <template v-for="(v,i) in addcategory">
                      <el-col
                          v-if="['deptId', 'doctorId', 'state'].includes(v.modelValue)"
                          :key="i"
                          :span="v.spanRows">
                        <el-form-item
                            :prop="v.modelValue"
                            :rules="getFieldRules(v)"
                            :label="v.label">
                          <el-select
                              v-model="editForm[v.modelValue]"
                              filterable
                              placeholder="请选择"
                              :disabled="editForm.deptId == null?v.disabled:false"
                              style="width: 100%">
                            <el-option
                                v-for="item in $data[v.op]"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id">
                              <span style="float: center; color: #8492a6; font-size: 12px">{{ item.label }}</span>
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </template>
                  </el-row>

                  <!-- 第二行：复选框 -->
                  <el-row :gutter="20" class="checkbox-row">
                    <template v-for="(v,i) in addcategory">
                      <el-col
                          v-if="v.type === 'checkbox'"
                          :key="'cb-'+i"
                          :span="v.spanRows">
                        <el-form-item
                            :prop="v.modelValue"
                            :rules="getFieldRules(v)"
                            :label="v.label">
                          <el-checkbox
                              v-model="editForm[v.modelValue]"
                              :true-label="1"
                              :false-label="0">
                          </el-checkbox>
                        </el-form-item>
                      </el-col>
                    </template>
                  </el-row>

                  <!-- 时间选择器部分 -->
                  <el-form :model="editForm" :disabled="isLookData">
                    <template v-for="item in formConfig">
                      <el-form-item :label="item.label" :key="item.label">
                        <el-time-picker
                            :value="[editForm[item.startField], editForm[item.endField]]"
                            @input="val => handleTimeChange2(val, item.startField, item.endField)"
                            is-range
                            range-separator="-"
                            format="HH:mm"
                            value-format="HH:mm"
                            size="mini"
                            :disabled="editForm.schedulingC === 0 && !['startTime', 'endTime'].includes(item.startField)"
                            :picker-options="getTimeRange(item.startField)"
                        />
                      </el-form-item>
                    </template>
                  </el-form>

                  <!-- 表格部分 -->
                  <div class="table-header">
                    <span>挂号类别:</span>
                    <el-button-group class="transparent-btn-group">
                      <el-button type="" icon="el-icon-plus" size="mini" class="transparent-btn"
                                 @click="handleCategoryAdd" :disabled="tableData2.length >= 1"></el-button>
                      <el-button type="" icon="el-icon-edit" size="mini" class="transparent-btn"
                                 :disabled="!selectedRow" @click="handleCategoryEdit"></el-button>
                      <el-button type="" icon="el-icon-circle-close" size="mini" class="transparent-btn"
                                 :disabled="!selectedRow" @click="handlePriceDelete"></el-button>
                    </el-button-group>
                  </div>

                  <el-table :data="tableData2" border
                            @row-click="handleRowClick"
                            highlight-current-row
                            :style="{ width: windowWidth + 'px' }"
                            ref="myTable">
                    <template v-for="col in tableRows2">
                      <el-table-column
                          :key="col.prop"
                          :type="col.type"
                          :prop="col.prop"
                          :label="col.name"
                          :formatter="(row) => formatColumn(row, col.prop)"
                          align="center"
                      ></el-table-column>
                    </template>
                    <el-table-column fixed="left" label="行号" type="index" width="50"></el-table-column>
                  </el-table>
                </el-form>
              </div>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" type="primary" @click="submitForm" :disabled="isLookData">修改</el-button>
            <el-button size="mini" @click="handleClose">取消</el-button>
          </div>
        </el-dialog>

        <!-- 其他对话框保持不变 -->
        <div class="tabs">
          <el-dialog
              :close-on-click-modal="false"
              :title="dynamicTitle"
              :visible.sync="editCategoryDialogVisible"
              width="35%"
              :before-close="handleEditCategoryClose">
            <el-form :model="editCategoryForm" size="mini" class="compact-form"
                     style="display: flex; flex-direction: column; align-items: center;">
              <el-form-item label="项目名称:" prop="code" style="width: 100%; display: flex; justify-content: center;">
                <el-select
                    filterable
                    :filter-method="handleSimpleSearch"
                    v-model="editCategoryForm.costid"
                    placeholder="请选择"
                    style="width: 180px;" @focus="loadCategoryOptions">
                  <el-option
                      v-for="item in categoryOptions"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id"
                      :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="项目数量:" prop="num" style="width: 100%; display: flex; justify-content: center;">
                <el-input-number
                    :min="0"
                    :controls="false"
                    v-model="editCategoryForm.num"
                    style="width: 180px;">
                </el-input-number>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="handleEditCategoryClose">取 消</el-button>
          <el-button type="primary" size="mini" @click="handleEditCategoryData">确 定</el-button>
        </span>
          </el-dialog>
        </div>

        <div class="tabs">
          <el-dialog
              :close-on-click-modal="false"
              title="挂号类别-新增"
              :visible.sync="editCategoryDialogVisible"
              width="35%"
              :before-close="handleAddCategoryClose">
            <el-form-item label="挂号类别:" prop="code" style="width: 100%; display: flex; justify-content: center;">
              <el-select
                  filterable
                  :filter-method="handleSimpleSearch"
                  v-model="addCategoryForm.rgstTypeId"
                  placeholder="请选择"
                  style="width: 180px;" @focus="loadCategoryOptions">
                <el-option
                    v-for="item in categoryOptions"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                    :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="主要类别:" prop="num" style="width: 100%; display: flex; justify-content: center;">
              <el-select v-model="addCategoryForm.mainType" placeholder="请选择" style="width: 180px;">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="handleAddCategoryClose">取 消</el-button>
          <el-button type="primary" size="mini" @click="handleAddPriceData">确 定</el-button>
        </span>
          </el-dialog>
        </div>
      </div>
    </div>

  </div>
</template>/

<script>
import {
  addClinicSchedule,
  editClinicSchedule,
  editState,
  getActiveList,
  getAttribute,
  getCategory,
  getCategoryById,
  getClinicScheduleData,
  getStaffList
} from "@/api/clinicSchedule/clinicSchedule";
import Acccategory from './clinicScheduleTabel.js'
import {pinyin} from "pinyin-pro";
import {withLoading} from "@/untils/loading";

export default {
  components: {},
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      timeRange: [
        new Date(1970, 0, 1, 0, 0, 0),
        new Date(1970, 0, 1, 0, 0, 0),
      ],
      numericValue: null,
      department: null, // 确保有初始值
      doctor: null,
      watch: '查看',
      searchValue: '',
      toCodeNum: '0000',//拼接自增 导零
      CatalogueName: '坐诊管理',
      windowWidth: '',
      DropDownedName: '全部',
      typeValue: '',
      YNuseVaule: '可用',
      nowDateTimeValue: '',
      iconComes: 'el-icon-cflx',
      operatingTime: '',
      // str use


      statDateTime: '',
      // boolean
      disabled: true,
      loading: false,
      formdisabled: true,
      dialogVisible: false,	//此乃查看/编辑控制
      addDialogVisible: false,  //此乃新增控制
      editDialogVisible: false,  //此乃新增控制
      addCategoryDialogVisible: false,
      editCategoryDialogVisible: false,
      editCategoryDialogVisible1: false,
      selectedRow: null,
      isLookData: false,
      dynamicTitle: '',
      dataIndex: 0,
      CodeNumber: 0,
      topNum: 999, // 上下限
      upNum: 0,
      pageNum: 1, //当前页currentPage
      pageSize: 8,
      totalSize: 10, //总条数
      pageDataState: null,
      addcategory: [],
      categoryOptions: [],
      mainTypeOptions: [{id: 1, label: '是', disabled: false}, {id: 0, label: '否', disabled: false}],
      addCategoryForm: {
        rgstTypeId: null,
        mainType: 1,
        odcost: null
      },
      editCategoryForm: {
        rgstTypeId: null,
        mainType: null,
        odcost: null
      },

      formConfig: [
        {
          label: '时\u3000 效：',
          type: 'timeRange',
          startField: 'startTime',
          endField: 'endTime'
        },
        {
          label: '上午时段:',
          type: 'timeRange',
          startField: 'smorningTime',
          endField: 'emorningTime'
        },
        {
          label: '下午时段:',
          type: 'timeRange',
          startField: 'safternoonTime',
          endField: 'eafternoonTime'
        },
        {
          label: '晚班时段:',
          type: 'timeRange',
          startField: 'snightTime',
          endField: 'enightTime'
        },
      ],

      addForm: {
        deptId: null,
        doctorId: null,
        eafternoonTime: '18:00',//下午结束时间
        emorningTime: '12:00',//上午结束时间
        endTime: '23:59',//结束时间
        rgstTypes: [],
        state: 1,
        safternoonTime: '13:00',//下午开始时间
        schedulingB: 0,
        schedulingC: 0,
        smorningTime: '7:30',//上午开始时间
        snightTime: '19:00',//晚班开始
        enightTime: '23:59',//晚班结束
        startTime: '00:00',//开始时间
      },
      editForm: {
        id: null,
        deptId: null,
        doctorId: null,
        eafternoonTime: '',
        state: null,
        emorningTime: '',
        endTime: '',
        rgstTypes: [],
        safternoonTime: '',
        schedulingB: null,
        schedulingC: null,
        smorningTime: '',
        snightTime: '',
        enightTime: '',
        startTime: '',
      },
      formRules: {
        deptId: [
          {required: true, message: '请选择科室', trigger: 'blur'}
        ],
        doctorId: [
          {required: true, message: '请选择医生', trigger: 'blur'}
        ]
      },
      form: {
        classificationCode: "001",
        code: "",
        dosageName: "",
        operationTime: "",
        operator: "",
        pinyinCode: "",
        remark: "",
        systemSerial: "1",
        validStatus: ""
      },

      elTree: [{label: '全部'}],
      userInfo: [],
      watchData: [],
      profttlIds: [],
      findAttribute: [],
      active: [],
      staff: [],
      state: [{id: 1, label: '有效'}, {id: 0, label: '禁用'}],
      TypeOption: [{id: 1, label: '普通挂号'}, {id: 2, label: '急诊挂号'}, {id: 3, label: '简易门诊'}],
      headerBtn: [
        {add: "add", title: "新增", type: "warning", auth: 'system:drgstable:add'},
      ],
      tableRows: [
        {name: "系统序号", prop: "id", type: ""}, {name: "科室名称", prop: "deptName", type: ""},
        {name: "医生名称", prop: "doctorName", type: ""}, {name: "挂号类别", prop: "registertypeName", type: ""},
        {name: "开始时间", prop: "startTime", type: ""}, {name: "结束时间", prop: "endTime", type: ""},
        {name: "上午开始时间", prop: "smorningTime", type: ""}, {name: "上午结束时间", prop: "emorningTime", type: ""},
        {name: "下午开始时间", prop: "safternoonTime", type: ""}, {
          name: "下午结束时间",
          prop: "eafternoonTime",
          type: ""
        },
        {name: "晚上开始时间", prop: "snightTime", type: ""}, {name: "晚上结束时间", prop: "enightTime", type: ""},
      ],
      tableRows2: [
        {name: "挂号类别", prop: "rgstTypeId", type: ""},
        {name: "合计金额", prop: "odcost", type: ""}
      ],
      tableData: [],
      tableData2: [],
      tableData3: [],
      permissionsArr: [],
    };
  },
  computed: {
    // 格式化数字，确保4个0后的数字自增时不会出现前导零
    formattedNumber() {
      return '00000' + this.toCodeNum.toString().slice(1);
    },
  },
  mounted() {
    this.addcategory = Acccategory.map(function (v) {
      return v
    })
    this.dataIndex++
    this.loadData();
    this.addEvent(null, 0)
    this.addEvent(null, 2)
    this.permissionsArr = JSON.parse(localStorage.getItem('permissions'))
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
    this.addForm.operator = this.userInfo.username
    //获取动态盒子宽度，实时赋值给右侧 => this.$refs.mainRight.offsetWidth;
    this.$nextTick(() => {
      this.updateWindowWidth();
      window.addEventListener('resize', this.updateWindowWidth);
    })
  },
  methods: {
    /*handleDisabledFreeOfCharge(selectedId) {
      const selectedItem = this.categoryOptions.find(item => item.id === selectedId);
      if (!selectedItem) return;
      if (parseInt(selectedItem.odcost) === 0) {
        this.mainTypeOptions = this.mainTypeOptions.map(option => {
          if (option.id === 1) {
            option.disabled = true;
          }
          return option;
        });
        if (this.addCategoryForm.mainType === 1) {
          this.addCategoryForm.mainType = 0;
          this.$message.warning("金额为0不能设置为主要类别");
        }
      } else {
        this.mainTypeOptions = this.mainTypeOptions.map(option => {
          option.disabled = false;
          return option;
        });
      }
    },*/
    getTimeRange(field) {
      const rangeRules = {
        // 上午时段
        smorningTime: '07:30 - 12:00',  // 上午开始时间限制
        emorningTime: '07:30 - 12:00',  // 上午结束时间限制

        // 下午时段
        safternoonTime: '13:00 - 18:00', // 下午开始时间限制
        eafternoonTime: '13:00 - 18:00', // 下午结束时间限制

        // 晚班时段
        snightTime: '19:00 - 23:59',     // 晚班开始时间限制
        enightTime: '19:00 - 23:59',     // 晚班结束时间限制

        // 全天时段
        startTime: '00:00 - 23:59',
        endTime: '00:00 - 23:59'
      };

      return {
        selectableRange: rangeRules[field] || '00:00 - 23:59' // 默认全天可选
      };
    },

    async loadDepartments() {
      await this.loadData();
    },


    handleTimeChange(val, startField, endField) {
      if (val) {
        this.$set(this.addForm, startField, val[0]);
        this.$set(this.addForm, endField, val[1]);
      }
    },

    handleTimeChange2(val, startField, endField) {
      if (val) {
        this.editForm[startField] = val[0];
        this.editForm[endField] = val[1];
      }
    },


    handleEditCategoryClose() {
      this.editCategoryForm = Object.assign({}, this.$options.data.call(this).editCategoryForm)
      this.editCategoryDialogVisible1 = false;
    },
    handleAddCategoryClose() {
      this.addCategoryForm = Object.assign({}, this.$options.data.call(this).addCategoryForm)
      this.selectedRow = null;
      this.addCategoryDialogVisible = false;
    },
    /*---------项目名称名字和字母搜索---------*/
    handleSimpleSearch(query) {
      if (!query) {
        this.categoryOptions = [...this.categoryOptions];
        return;
      }
      const lowerQuery = query.toLowerCase();
      this.categoryOptions = this.categoryOptions.filter(item => {
        return (
            item.label.includes(query) ||
            (item.pycode && item.pycode.toLowerCase().includes(lowerQuery))
        );
      });
    },

    /*---------表单验证---------*/
    async handleClickEdit(data) {
      this.selectedRow = null;
      this.dynamicTitle = '挂号类别-编辑'
      this.tableData2 = [];
      await this.loadCategoryOptions();
      const clinicSchedule = await getCategoryById({id: data.id});
      const newData = clinicSchedule.data.registertypeDrgstRespVOS.map(item => ({
        rgstTypeId: item.id,
        mainType: item.mainType,
        odcost: Number(item.odcost).toFixed(2),
      }));
      this.tableData2 = [...this.tableData2, ...newData];

      const attributeList = await getAttribute();
      this.findAttribute = attributeList.data.map(v => {
        return {label: v.deptName, id: v.id}
      })
      const activeList = await getActiveList({deptId: data.deptId})
      this.active = activeList.data.map(v => {
        return {label: v.fullName, id: v.id, userCode: v.userCode, professionalTitle: v.professionalTitle}
      })
      this.editForm = {...data}
      this.editDialogVisible = true;
    },


    /*---------表单验证---------*/
    getFieldRules(field) {
      const requiredFields = ['deptId', 'doctorId'];
      if (requiredFields.includes(field.modelValue)) {
        return [{required: true, message: `${field.label}不能为空`,}];
      }
      return [];
    },

    submitForm() {
      this.$refs.addFormRef.validate(valid => {
        if (valid) {
          if (this.editDialogVisible) {
            this.editCategoryData();
            return
          }
          this.addCategoryData();
        } else {
          this.$message.error('请填写完整表单信息');
          return false;
        }
      });
    },


    /*---------新增修改表单嵌套的表格双击高亮处理---------*/
    handleRowClick(row) {
      this.$refs.myTable.setCurrentRow(row);
      const table = this.$el.querySelector('.el-table__body');
      table.querySelectorAll('tr').forEach(tr => {
        tr.classList.remove('perm-highlight');
      });
      event.currentTarget.classList.add('perm-highlight');
      this.selectedRow = row;
    },

    /*---------项目价格下拉框获取数据---------*/
    async loadCategoryOptions() {
      const res = await getCategory();
      const idsInTable = this.tableData2.map(item => item.rgstTypeId);
      this.categoryOptions = res.data.map(item => ({
        id: item.id,
        label: item.designation,
        odcost: Number(item.odcost).toFixed(2),
        pycode: pinyin(item.designation, {pattern: 'first', toneType: 'none', separator: ''}).toLocaleUpperCase(),
        /*        disabled: idsInTable.includes(item.id) || (this.addCategoryForm.mainType === 1 && item.odcost === 0)*/
      }));
    },

    /*---------新增挂号类别---------*/
    handleAddPriceData() {
      if (!this.addCategoryForm.rgstTypeId) {
        this.$message.warning('请选择项目')
        return
      }
      const mainTypeOnes = this.tableData2.filter(item => item.mainType === 1);
      if (mainTypeOnes.length >= 1 && this.addCategoryForm.mainType === 1) {
        this.$message.error('只能存在一个主要类别');
        return;
      }

      const loadingInstance = this.$loading({
        lock: true,
        text: '数据提交中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const foundItem = JSON.parse(JSON.stringify(this.categoryOptions.find(item => item.id === this.addCategoryForm.rgstTypeId)));
      this.addCategoryForm.odcost = Number(foundItem.odcost).toFixed(2);
      this.tableData2.push(this.addCategoryForm);
      this.addCategoryDialogVisible = false;
      this.addCategoryForm = Object.assign({}, this.$options.data.call(this).addCategoryForm)
      this.selectedRow = null;
      loadingInstance.close();
    },

    /*---------修改挂号类别(项目价格接口)---------*/
    async handleEditCategoryData() {
      if (!this.editCategoryForm.rgstTypeId) {
        this.$message.warning('请选择项目');
        return;
      }
      const index = this.tableData2.findIndex(
          item => item.rgstTypeId === this.selectedRow.rgstTypeId
      );
      const otherMainTypeOnes = this.tableData2.filter(
          (item, i) => item.mainType === 1 && i !== index
      );
      /*if (otherMainTypeOnes.length >= 1 && this.editCategoryForm.mainType === 1) {
        this.$message.error('只能存在一个主要类别');
        return;
      }*/
      await withLoading(this, '数据提交中...')(async () => {
        const foundItem = this.categoryOptions.find(
            item => item.id === this.selectedRow.rgstTypeId
        );
        this.editCategoryForm.odcost = foundItem.odcost;
        this.$set(this.tableData2, index, {...this.editCategoryForm});
        this.editCategoryForm = Object.assign({}, this.$options.data.call(this).editCategoryForm)
        this.selectedRow = null;
        this.editCategoryDialogVisible1 = false;
      });
    },


    handleCategoryAdd() {
      this.addCategoryDialogVisible = true;
      this.addCategoryForm = Object.assign({}, this.$options.data.call(this).addCategoryForm)
      if (this.tableData2.some(item => item.mainType === 1)) {
        this.$set(this.addCategoryForm, 'mainType', 0)
      }
    },
    /*---------修改挂号类别(项目价格)---------*/
    handleCategoryEdit() {
      this.editCategoryForm = {};
      this.editCategoryDialogVisible1 = true;
      this.editCategoryForm = {...this.selectedRow}
    },

    /*---------删除挂号类别(项目价格)---------*/
    handlePriceDelete() {
      this.tableData2 = this.tableData2.filter(
          item => item.rgstTypeId !== this.selectedRow.rgstTypeId
      );
      this.selectedRow = null;
    },


    /*---------新增下拉框聚焦处理---------*/
    async addEvent(v, i) {
      switch (i) {
        case 0:
          const attributeList = await getAttribute();
          this.findAttribute = attributeList.data.map(v => {
            return {label: v.deptName, id: v.id}
          })
          break;

        case 1:
          console.log(this.addForm.deptId)
          const activeList = await getActiveList({deptId: this.addForm.deptId})
          this.active = activeList.data.map(v => {
            return {label: v.fullName, id: v.id, userCode: v.userCode, professionalTitle: v.professionalTitle}
          })
          console.log(activeList, 'activeListactiveListactiveList')
          break

        case 2:
          const staffList = await getStaffList();
          this.staff = staffList.data.map(v => {
            return {label: v.fullName, id: v.id}
          })
          break
      }
    },
    addEventChangge() {
    },

    editFormValue(item) {

    },

    /*---------新增挂号类别---------*/
    async addCategoryData() {
      await withLoading(this, '数据提交中...')(async () => {
        if (!this.addForm.deptId || !this.addForm.doctorId) {
          return this.$message.error(!this.addForm.deptId ? '科室不能为空' : '医生不能为空');
        }
        if (this.addForm.smorningTime < '07:30') return this.$message.error('上午开始时间不能早于7:30');
        if (this.addForm.emorningTime > '12:00') return this.$message.error('上午结束时间不能晚于12:00');
        if (this.addForm.safternoonTime < '13:00') return this.$message.error('下午开始时间不能早于13:00');
        if (this.addForm.eafternoonTime > '18:00') return this.$message.error('下午结束时间不能晚于18:00');
        if (this.addForm.snightTime < '19:00') return this.$message.error('晚上开始时间不能早于19:00');
        if (this.addForm.enightTime > '23:59') return this.$message.error('晚上结束时间不能晚于23:59');
        this.addForm.rgstTypes = this.tableData2;
        if (this.addForm.rgstTypes.length <= 0) return this.$message.error('主挂号类别不能为空!');

        const res = await addClinicSchedule(this.addForm)
        if (res.code === 200) {
          await this.loadData();
          this.addForm = Object.assign({}, this.$options.data.call(this).addForm)
          this.tableData2 = [];
          this.addDialogVisible = false;
        } else {
          this.$message.error(res.message)
        }
      });
    },

    async editCategoryData() {
      await withLoading(this, '数据提交中...')(async () => {
        this.editForm.rgstTypes = [...(this.editForm.rgstTypes || []), ...this.tableData2];

        if (!this.editForm.rgstTypes?.length) {
          return this.$message.error('请添加至少一项挂号类别');
        }

        this.editForm.rgstTypes = [...this.tableData2]
        const res = await editClinicSchedule(this.editForm)
        if (res.code === 200) {
          this.editDialogVisible = false;
          await this.loadData();
          this.editForm = Object.assign({}, this.$options.data.call(this).editForm)
          this.tableData2 = [];
        } else {
          this.$message.error(res.message)
        }
      });
    },

    /*---------分页回显数据---------*/
    formatColumn(row, prop) {
      const value = row[prop];
      switch (prop) {
        case 'rgstTypeId':
          return this.mapToLabel(value, this.categoryOptions);
        case 'mainType':
          return value === 1 ? '是' : '否'
        default:
          return value; // 默认原样显示
      }
    },

    /*---------分页回显数据---------*/
    mapToLabel(value, options) {
      if (value === undefined || value === null) return '';
      const found = options.find(item => item.id == value);
      return found ? found.label : value;
    },


    handleNodeClick(data) {
      this.loadData();
    },


    /*---------数据源---------*/
    async loadData() {
      let res = await getClinicScheduleData({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        state: this.numericValue === null ? null : this.numericValue,
        deptId: this.department === null ? null : this.department,
        doctorId: this.doctor === null ? null : this.doctor,
      })
      if (res.code === 200) {
        this.tableData = res.data.content
        this.pageNum = res.data.pageNum
        this.pageSize = res.data.pageSize
        this.totalSize = res.data.totalSize
        this.CodeNumber = res.data.content.length
      } else {
        this.$message.error(res.message)
      }
    },

    columnWidth(col, list) {
      let prop = col.prop, lab = col.lab;
      let width = 40; // 设定一个最小值
      let maxlenStr = ""; // 最长字符串
      for (let info of list) {
        if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
      }
      width = Math.max(width, len(lab), len(maxlenStr));
      // 表格自带的内边距(20px) 自调
      return width + 8; // 这里加了 12px
      function len(str) {
        // 实际分配长度可根据需要自行调整
        let length = 12;
        for (const char of str + "") {
          // 英文小写字符 8px
          if ("a" <= char && char <= "z") length += 8;
          // 英文大写字符 8px
          else if ("A" <= char && char <= "Z") length += 8;
          // 中文字符 28px
          else if (char >= "\u4e00" && char <= "\u9fa5") length += 12;
          // 其他 8px
          else length += 12;
        }
        return length;
      }
    },

    /*---------启用禁用挂号类别---------*/
    async handleStartOrDisabled(row) {
      try {
        const action = row.state === 1 ? '禁用' : '启用';
        await this.$confirm(
            `请确认是否${action}${row.deptName}下【${row.doctorName}】的挂号类型`,
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }
        );

        await withLoading(this, `${action}处理中...`)(async () => {
          // 确保使用await等待请求完成
          const res = await editState({
            id: row.id,
            state: row.state === 1 ? 0 : 1
          });

          if (res.code === 200) {
            await this.loadData();
          } else {
            this.$message.error(res.message || "操作失败");
          }
        });
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.warning("操作已取消");
        }
        console.error("操作出错:", error);
      }
    },

    /*---------关闭模态框清空数据处理---------*/
    handleClose() {
      this.dialogVisible = false;
      this.formdisabled = false;
      this.editDialogVisible = false;
      this.addDialogVisible = false;
      this.selectedRow = [];
      this.tableData2 = [];
      this.addForm = Object.assign({}, this.$options.data.call(this).addForm)
      this.addCategoryForm = Object.assign({}, this.$options.data.call(this).addCategoryForm)
      this.$refs.addFormRef.resetFields();
      this.loadData();
    },

    async handledbRow(row, column, event) {
      this.selectedRow = null;
      this.tableData2 = [];
      this.dynamicTitle = '查看'
      this.isLookData = true;
      await this.loadCategoryOptions();
      const clinicSchedule = await getCategoryById({id: row.id});
      const newData = clinicSchedule.data.registertypeDrgstRespVOS.map(item => ({
        rgstTypeId: item.id,
        mainType: item.mainType,
        odcost: Number(item.odcost).toFixed(2),
      }));
      this.tableData2 = [...this.tableData2, ...newData];

      const attributeList = await getAttribute();
      this.findAttribute = attributeList.data.map(v => {
        return {label: v.deptName, id: v.id}
      })
      const activeList = await getActiveList({deptId: row.deptId})
      this.active = activeList.data.map(v => {
        return {label: v.fullName, id: v.id}
      })
      this.editForm = {...row}
      this.editDialogVisible = true;
    },

    /*---------按钮顺序处理---------*/
    handClick(i) {
      switch (i) {
        case 0:
          // 处理索引2的逻辑 => 新增
          this.watch = '新增';
          this.addDialogVisible = true;
          this.selectedRow = null;
          break;
      }
    },

    /*---------禁用启用数据查询---------*/
    handleCommand(command) {
      this.numericValue = command === 'a' ? 1 : command === 'b' ? 0 : command === 'c' ? null : null;
      this.DropDownedName = command === 'a' ? '可用' : command === 'b' ? '禁用' : '全部';
      this.loadData();
    },


    /*---------分页设置--------*/
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.loadData();
    },
    //当前条数改变触发
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.loadData();
    },
    // 实时宽度
    updateWindowWidth() {
      this.windowWidth = window.innerWidth - 288;
    },
    getColumnWidth(label, prop, tableData) {
      const minWidth = 100;
      const padding = 30; // 增加边距缓冲
      const contentList = tableData.map(item => item?.[prop] ?? '');

      // 计算所有内容宽度（包括表头）
      const widths = [...contentList, label].map(text => {
        const str = String(text || '');
        return this.getTextWidth(str) + padding;
      });

      return Math.max(minWidth, ...widths);
    },

    // 精确计算文本宽度（使用Canvas）
    getTextWidth(text, fontSize = 14) {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      ctx.font = `${fontSize}px Microsoft YaHei`;
      return ctx.measureText(text).width;
    },

    labelHead(h, {column, $index}) {
      let l = column.label.length;
      let f = 12;
      column.minWidth = f * (l + 5); //加上一个文字长度
      return h("div", {class: "table-head", style: {width: "100%"}}, [
        column.label,
      ]);
    },

    safeGetMappedValue(col, row, type) {

      const hiddenProps = new Set([
        'usedfrquId', 'sdoseCnt', 'prdCnt', 'prdDays', 'medcWayId', 'tcmCnt',
        'selfProe', 'skintstRslt', 'remark', 'remarks', 'rxDosCnt',
      ]);

      if (hiddenProps.has(col.prop)) {
        return ''; // 直接返回空字符串，不显示
      }
      // 1. 检查数据有效性
      const rawValue = row[col.prop];
      if (rawValue === null || rawValue === undefined) return ' ';

      // 2. 检查映射数组
      const mapArray = this[col.op];
      if (!col.op || !Array.isArray(mapArray)) return rawValue;

      // 3. 执行映射
      const matched = mapArray.find(item => item.id == rawValue);
      return matched?.label || rawValue;
    },
  }
}
</script>


<style lang="less" scoped>
.compact-form {
  /* 统一行样式 */

  .el-row {
    margin-bottom: 12px;

    /* 列间距优化 */

    &.el-row--flex {
      flex-wrap: wrap;
    }

    /* 列样式 */

    .el-col {
      padding-bottom: 8px;
    }
  }

  /* 表单项优化 */

  .el-form-item {
    margin-bottom: 0;

    &__label {
      line-height: 28px;
      padding-bottom: 0;
    }

    &__content {
      line-height: 28px;

      /* 统一输入控件宽度 */

      .el-select,
      .el-input,
      .el-input-number {
        width: 100%;
      }
    }
  }

  /* 复选框行特殊处理 */

  .checkbox-row {
    .el-form-item__content {
      display: flex;
      align-items: center;

      .el-checkbox {
        margin-left: 2px;
      }
    }
  }


  /* 表格头部优化 */

  .table-header {
    margin: 16px 0 8px;
    display: flex;
    align-items: center;

    .transparent-btn-group {
      margin-left: 12px;

      .el-button {
        padding: 5px 8px;
      }
    }
  }
}

.custom-select .el-select__caret {
  right: 20px !important;
}

.custom-select .el-icon-circle-close {
  right: 5px !important;
}


.time-picker-center /deep/ .el-input__prefix {
  left: 10px;
}

.time-picker-center /deep/ .el-icon-time {
  font-size: 14px !important;
  margin-top: -1px;
}

.multi-select-container {
  padding: 20px;
}

.select-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.select-label {
  font-size: 14px;
  color: #606266;
  margin-right: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.select-with-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 10px;
}

.id-array {
  margin-top: 10px;
  color: #666;
  font-size: 14px;
}

.el-select {
  width: 150px;
}

.el-tag {
  margin-right: 6px;
}

.el-table :deep(.perm-highlight) {
  background-color: #000 !important;
}

.el-table :deep(.perm-highlight) > td {
  background-color: transparent !important;
}

/* 覆盖Element默认高亮色 */
.el-table :deep(.current-row) {
  background-color: #000 !important;
}


.transparent-btn-group {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.transparent-btn {
  background-color: transparent !important;
  border: none !important;
  color: white !important; /* 图标设为白色 */
  padding: 6px 8px !important;
  font-size: 14px !important;
}

.transparent-btn:hover {
  background-color: rgba(255, 255, 255, 0.2) !important; /* 悬停效果 */
}

.transparent-btn:active {
  transform: scale(0.95);
}

.transparent-btn-group {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.table-header {
  background-color: #39648f; /* 深蓝色，与图片一致 */
  color: white;
  padding: 3px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px 4px 0 0;

}

// 穿透
/deep/ .el-input.is-disabled .el-input__inner {
  color: #87898f;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  color: #87898f;
}

/deep/ .el-icon-arrow-left:before {
  content: "\e67d";
  font-size: 18px;
}

/deep/ .el-dialog__title {
  font-size: 12px;
  color: #fff;
}

/deep/ .el-dialog__headerbtn {
  top: 12px;
}

/deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

/deep/ .el-dialog__headerbtn .el-dialog__close:hover {
  color: #00007f;
}

/deep/ .el-dialog__header {
  background-color: #39648f;
  padding: 8px;
}

/deep/ .el-dialog__body {
  padding: 0 20px 0 20px;
  border: 1px solid #efefef;
  padding: 8px;
}

/deep/ .el-dropdown-menu__item {
  font-size: 12px;
}

/deep/ .el-descriptions {
  font-size: 12px !important;
}

/deep/ .el-descriptions-item__container {
  display: flex !important;
  // align-items: center !important;
  padding-top: 12px !important;
}

/deep/ .el-descriptions-item__label:not(.is-bordered-label) {
  padding-left: 0;
  width: 66px;
  display: flex;
  justify-content: right;
}

/deep/ .el-color-picker__icon, .el-input, .el-textarea {
  width: 100%;
}

// content
.MedicenCata {
  height: 100%;
  width: 100%;
  // header
  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
    background-color: #efefef;
    padding: 4px;

    // justify-content: space-evenly;
    // icon
    .header-icon {
      display: flex;
      align-items: center;
    }

  }

  // main
  .main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    // height: 473px; /* 设置父容器的高度 */
    // overflow-y: auto; /* 当内容超出容器高度时显示垂直滚动条 */
    // left

    // right
    .main-right {
      flex: 1;
      width: 100%;
      height: 100%;
      // alert
      .addmessagesBox {
        .tabs {
          /deep/ .el-select > .el-input {
            width: 172px;
          }

          /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
            width: 172px;
          }

          /deep/ .el-form-item__content {
            display: flex;

            span {
              font-size: 12px;
            }
          }

          .oneLine {
            width: 524px;
            // background-color: indianred;
          }
        }

        /deep/ .el-dialog__title {
          font-size: 12px;
        }

        /deep/ .el-table {
          font-size: 12px;
        }

      }

      // icon
      .main-icon {
        display: flex;
        align-items: center;
        padding: 12px;
        line-height: 40px;

        .main-icon-a {
          // width: 240px;
          // background-color: #00557f;
        }

        .main-icon-b {
          margin-left: 28px;

          /deep/ .el-dropdown {
            font-size: 12px;
            cursor: pointer;
          }

          /deep/ .el-dropdown:hover {
            font-weight: bold;
            color: #66b1ff;
          }

          /deep/ .el-icon--right {
            // background-color: #66b1ff;
          }

          /deep/ .el-popper[x-placement^=bottom] {
            margin-top: 0;
          }
        }

        // c
        .main-icon-c {
          display: flex;
          margin-left: 28px;

          /deep/ [data-v-2bacc09b] .el-color-picker__icon, .el-input[data-v-2bacc09b], .el-textarea[data-v-2bacc09b] {
            width: 80%;
          }
        }
      }

      // table
      /deep/ .el-table .cell {
        font-size: 12px;
        text-align: center;
      }

      /deep/ .el-table td.el-table__cell div :first-child {
        text-align: center;
      }

      /deep/ .el-table td.el-table__cell div {
        text-align: center;
        overflow: hidden;
        white-space: normal;
        word-break: break-all;
      }

    }
  }

  // feet
  .feet {
    .addmessagesBox {
      .aform {
        padding: 12px;
        margin-top: 12px;
        border: 1px solid #e7e7e7;
      }

      .bform {
        padding: 12px;
        margin-top: 12px;
        border: 1px solid #e7e7e7;
      }
    }

    // alert
    .messagesBox {
      .tabs {

        /deep/ .el-form-item__content {
          display: flex;

          span {
            font-size: 12px;
          }
        }

        .oneLine {
          width: 524px;
          // background-color: indianred;
        }
      }

      /deep/ .el-dialog__title {
        font-size: 12px;
      }

      /deep/ .el-table {
        font-size: 12px;
      }

    }
  }

}
</style>